<template>
    <div class="news-carousel">
      <div class="carousel-container">
        <el-carousel
          ref="carouselRef"
          :interval="4000"
          type="card"
          height="300px"
          class="carousel"
        >
          <el-carousel-item v-for="(item, index) in announcements" :key="item.id">
            <div
              class="carousel-item"
              :style="{ backgroundImage: `url(${item.img})` }"
            >
              <h3>{{ item.title }}</h3>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      
      <div class="title-table">
        <div class="title-header">
          <h3>公告标题：</h3>
        </div>
        <table>
          <tbody>
            <tr
              v-for="(item, index) in announcements"
              :key="item.id"
              @mouseenter="jumpToSlide(index)"
            >
              <td class="title-item">{{ item.title }}</td>
              <td class="description">{{ item.description }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { noticeListService } from '@/api/announcement.js';
  
  const announcements = ref([]);
  const carouselRef = ref(null);
  
  const fetchAnnouncements = async () => {
    try {
      const response = await noticeListService();
      announcements.value = response.data.slice(0, 5); // 提取前五个公告
      console.log('公告列表:', announcements.value);
    } catch (error) {
      console.error('获取公告失败:', error);
    }
  };
  
  const jumpToSlide = (index) => {
    if (carouselRef.value) {
      carouselRef.value.activeIndex = index; // 切换轮播器到对应的项
    }
  };
  
  onMounted(() => {
    fetchAnnouncements();
  });
  </script>
  
  <style scoped>
  .news-carousel {
    display: flex;
    flex-direction: column;
    align-items: center; /* 居中整个容器 */
    margin-top: 40px; /* 添加顶部间距 */
    width: 70%; /* 设置整体宽度为 70% */
  }
  
  .carousel-container {
    flex: 1; /* 轮播器自适应高度 */
  }
  
  .carousel {
    position: relative;
  }
  
  .carousel-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* 提高轮播项高度 */
    background-color: red; /* 默认背景色 */
    background-size: cover; /* 背景图像覆盖 */
    background-position: center;
    color: white; /* 字体颜色 */
    text-align: center;
  }
  
  .title-table {
    width: 100%; /* 表格100%宽度 */
    margin-top: 20px; /* 表格顶部间距 */
    border-collapse: collapse; /* 合并表格边框 */
  }
  
  .title-table h3 {
    text-align: left; /* 左对齐标题 */
    margin: 0;
  }
  
  .table {
    width: 100%;
  }
  
  .title-item {
    font-weight: bold; /* 黑体加粗 */
  }
  
  .description {
    overflow: hidden; /* 溢出内容隐藏 */
    display: -webkit-box; /* 让文本为多行显示 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 2; /* 限制为两行 */
    text-overflow: ellipsis; /* 溢出省略号 */
  }
  
  td {
    padding: 10px; /* 表格每个单元格的内边距 */
    border-bottom: 1px solid #ccc; /* 添加分隔线 */
  }
  
  tr:hover {
    background-color: #f0f0f0; /* 鼠标悬浮时背景色 */
  }
  </style>
  